<template>
  <el-dialog v-dialogDrag
             :title="!this.dataForm.id ? '新增' : '修改'"
             :close-on-click-modal="false"
             :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="业务系统" prop="bizCode">
            <el-select v-model="dataForm.bizCode" placeholder="请选择" style="width: 100%" :class="isEdit ? 'rdonly': ''" :disabled="isEdit">
              <el-option v-for="(item, index) in dict.BizGroups" :key="index"
                         :label="item.value+':'+item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批次类型" prop="batchType">
            <el-select v-model="dataForm.batchType" placeholder="请选择" style="width: 100%" @change="batchChange($event)" :class="isEdit ? 'rdonly': ''" :disabled="isEdit">
              <el-option v-for="(item, index) in dict.BatchType" :key="index"
                         :label="item.value+':'+item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="批次编号" prop="batchCode" :class="isEdit ? 'rdonly': ''" :readonly="isEdit">
            <el-input v-model="dataForm.batchCode" placeholder="批次编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批次说明" prop="batchName">
            <el-input v-model="dataForm.batchName" placeholder="批次说明"></el-input>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="执行方式" prop="scheduleType">
            <el-select v-model="dataForm.scheduleType" placeholder="请选择" style="width: 100%"
                       @change="scheduleChange($event)">
              <template v-for="(item, index) in dict.ScheduleType">
                <el-option v-if=" !(item.value == 'A') " :key="index"
                           :label="item.value+':'+item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行时间" prop="scheduleConf" v-if="cronEnable">
            <div>
              <el-input v-model="dataForm.scheduleConf" placeholder="执行时间" class="input-with-inp"
                        :readonly="true" ></el-input>
              <el-button slot="append" icon="el-icon-date" @click="showDialog"
                         style=" position: absolute; height: 38px; top: 1px; right: 1px;
                         border: 0px; border-left: 1px solid #DCDFE6; border-bottom-left-radius: 0px; border-top-left-radius: 0px; "></el-button>
            </div>
            <div style="position: absolute; z-index: 10000">
              <vcrontab2 ref="Vcrontab2" v-if="showCronVisible2" @fill="crontabFill" @hide="crontabHide"
                         :expression="expression2"></vcrontab2>
              <vcrontab3 ref="Vcrontab3" v-if="showCronVisible3" @fill="crontabFill" @hide="crontabHide"
                         :expression="expression2"></vcrontab3>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="序号" prop="orders">
        <el-input v-model="dataForm.orders" placeholder="序号"></el-input>
      </el-form-item>
      <!--<el-row>
        <el-col :span="12">
          <el-form-item label="启动最大延迟时间" prop="startupMaxDelay">
            <el-input v-model="dataForm.startupMaxDelay" placeholder="启动最大延迟时间！暂未实现"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行预估超时" prop="exeTimeout">
            <el-input v-model="dataForm.exeTimeout" placeholder="执行预估超时！暂未实现"></el-input>
          </el-form-item>
        </el-col>
      </el-row>-->
      <el-form-item label="管理者A" prop="managerP1">
        <el-input v-model="dataForm.managerP1" placeholder="管理者A"></el-input>
      </el-form-item>
      <el-form-item label="管理者B" prop="managerP2">
        <el-input v-model="dataForm.managerP2" placeholder="管理者B"></el-input>
      </el-form-item>
      <el-form-item label="管理者C" prop="managerP3">
        <el-input v-model="dataForm.managerP3" placeholder="管理者C"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import Vcrontab2 from '../../../components/Crontab2/index'
  import Vcrontab3 from '../../../components/Crontab3/index'

  export default {
    data() {
      return {
        visible: false,
        cronEnable: true,
        cronConfig: 0,
        isEdit : false,
        showCronVisible2: false,
        showCronVisible3: false,
        expression2: '',
        dataForm: {
          bizCode: '',
          batchCode: '',
          batchType: '',
          scheduleType: '',
          scheduleConf: '',
          orders: '',
          batchName: '',
          startupMaxDelay: '',
          exeTimeout: '',
          managerP1: '',
          managerP2: '',
          managerP3: '',
        },
        dataRule: {
          bizCode: [{required: true, message: '业务系统编号不能为空', trigger: 'blur'}],
          batchCode: [{required: true, message: '批次编号不能为空', trigger: 'blur'}],
          batchType: [{required: true, message: '类型不能为空', trigger: 'blur'}],
          scheduleType: [{required: true, message: '执行方式不能为空', trigger: 'blur'}],
          scheduleConf: [{required: true, message: '执行时间不能为空', trigger: 'blur'}],
          orders: [{required: true, message: '序号不能为空', trigger: 'blur'}],
          batchName: [{required: true, message: '批次描述不能为空', trigger: 'blur'}],
          startupMaxDelay: [{required: true, message: '启动最大延迟时间不能为空', trigger: 'blur'}],
          exeTimeout: [{required: true, message: '执行预估超时不能为空', trigger: 'blur'}],
          managerP1: [{required: true, message: '管理者A不能为空', trigger: 'blur'}],
          managerP2: [{required: false, message: '管理者B不能为空', trigger: 'blur'}],
          managerP3: [{required: false, message: '管理者C不能为空', trigger: 'blur'}],
        }
      }
    },
    components: {
      Vcrontab2, Vcrontab3
    },
    methods: {
      init(id, data) {
        this.dataForm.id = id || ''
        this.visible = true
        this.isEdit = false;
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.dataForm = data
            this.scheduleChange(this.dataForm.scheduleType)
            this.isEdit = true;
          }else{

          }
        })
      },
      crontabFill(value) {
        this.dataForm.scheduleConf = value;
        this.showCronVisible2 = false;
        this.showCronVisible3 = false;
      },
      crontabHide() {
        this.showCronVisible2 = false;
        this.showCronVisible3 = false;
      },
      showDialog() {
        this.expression2 = this.dataForm.scheduleConf;//传入的 cron 表达式，可以反解析到 UI 上
        if (this.cronConfig == 0) {
          if (this.showCronVisible3) {
            this.showCronVisible3 = false;
          } else {
            this.showCronVisible3 = true;
          }
        } else {
          if (this.showCronVisible2) {
            this.showCronVisible2 = false;
          } else {
            this.showCronVisible2 = true;
          }
        }
      },
      batchChange(value) {
        this.cronConfig = value;
        this.showCronVisible2 = false;
        this.showCronVisible3 = false;
      },
      scheduleChange(value) {
        // if ("C" == value) {
        //   this.cronEnable = true;
        //   this.dataRule.scheduleConf.required = true;
        // } else {
        //   this.cronEnable = false;
        //   this.dataForm.scheduleConf = '';
        //   this.dataRule.scheduleConf.required = false;
        // }
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let obj = Object.assign({}, this.dataForm)
            this.getTableList(`/api/batchInfo/${!this.dataForm.id ? 'add' : 'mod'}`, obj, (data) => {
              if (data && data.code === '000000') {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>


